<?php include_once('inc/header.php');
//create_user($db,'testfunction@lol.com', '3433', 'Jalil', 'Benayachi', '0622144031', '1993-07-25', '46 Rue du moulin', 'pic.png', 'notyet', 'admin', '2014-11-06', '127.0.0.1');
 ?>
<!-- 
/////////////////////////////////////////////////////////////////////////////////////////////////


		   _ _   _       _   _   _ _______            _      
		  | (_) (_)     | | (_) (_)__   __|          | |     
		  | | ___  _ __ | | _____    | |_ __ __ _  __| | ___ 
	  _   | |/ _ \| '_ \| |/ / _ \   | | '__/ _` |/ _` |/ _ \
	 | |__| | (_) | | | |   < (_) |  | | | | (_| | (_| |  __/
	  \____/ \___/|_| |_|_|\_\___/   |_|_|  \__,_|\__,_|\___|
															 
		APPLIED WEB ARCHITECTURE - GROUP PROJECT ASSIGNEMENT
	
	LEAD DEVELOPPER		Jalil BENAYACHI
	LIVE DEMO			http://thejals.com/projects/jonkotrade/
	GOOGLE PROJECT		https://code.google.com/p/jonkotrade/
	LICENSE				(after PingPong release:) MIT Open-source License
	
	ABOUT THE PROJECT	/ 	CREDITS
	=	STOCK PHOTOS
		Since it's a marketing website project, we had to use stock photos to illustrate
		the different contents. Both are coming from a royalty-free image db websites,
		such as http://www.dreamstime.com/free-photos 
		
	= 	LAYOUT	
		Some of the layout CSS comes from third-party developers, shared open-source.
		Same about the Javascript: jQuerry and animations libraries were used.
		The main HTML was adapted from a previous project of mine, a Wordpress-like
		CMS which I didn't finally released.
		Instead Bootstrap I used WWW.GETSKELETON.COM to make the website responsive.
		
	=	PHP / SQL
		All the PHP and SQL was made from start to scratch after studying the project
		description and creating a list of features the website has to be able to do.
		Some were added during the development process.
		
	= 	HOSTING
		Since the PHP is server side, the project was developed using uWamp Server 
		(Similar to WAMP SERVER) for local-dev and live demo is hosted on my personal
		virtual private server (VPS) that I turned into an Apache2, PHP, mySQL (LAMP)
		server. It is ran by Ubuntu 14.04 LTS and hosted in OVH.fr's Roubaix Datacenters, FRANCE.

	=	SUBVERSION
		Because it is a group project, we used a subversion server (Hosted by Google Projects)
		with TortoiseSVN windows client. The Subversion's server address can be found on the 
		Google project page.
	
	LET'S PUT SOME CODE DOWN THERE NOW
/////////////////////////////////////////////////////////////////////////////////////////////////
 -->

	<!--page-->
		<!-- REVOLUTION SLIDER -->
        <div class="tp-banner-container">
		<div class="tp-banner">
		<ul>
		<!-- Slide 1 -->
			<li data-transition="slideright">
				<img src="img/slider/slider1.jpg" alt="" />
				
				
					
				<!-- Caption -->
				<div class="tp-caption lfb" data-x="870" data-y="150" data-speed="1400" data-start="1800" data-easing="easeOutExpo">
					<img src="img/slider/sweden.png" alt="" />
				</div>
				
			
				<!-- Caption -->	
				<div class="caption sft stl" data-x="center" data-y="150" data-speed="1000" data-start="700" data-easing="easeOutExpo">
					<h3 class="rev-title bold">It's here. It's called Jönkötrade.</h3>
				</div>
				
				<!-- Caption -->
				<div class="caption lfl stl rev-title-sub" data-x="center" data-y="260" data-speed="800" data-start="1100" data-easing="easeOutExpo">
					The ultimate website for trading & shopping in Jönköping
				</div>
				
				<!-- Caption -->
				<div class="caption sfb" data-x="center" data-y="350" data-speed="1100" data-start="1500" data-easing="easeOutExpo">
					<a href="#" class="btn btn-outline btn-mobile">Discover the project</a>                 
				</div>
			</li>
			
			<!-- Slide 2 -->
				<li data-transition="slideleft">
				<img src="img/slider/slider2.jpg" alt="" />
				
				<!-- Caption -->
				<div class="tp-caption lfl" data-x="right" data-y="55" data-speed="1000" data-start="800" data-easing="easeOutExpo">
					<img src="img/slider/iMac.png" alt="" />
				</div>
					
				<!-- Caption -->
				<div class="caption lfl stl bg" data-x="20" data-y="60" data-speed="800" data-start="700" data-easing="easeOutExpo">
					<h2 class="rev-title big white">The e-commerce Revolution.<br>Now available for everyone.</h2>
				</div>
					
				<!-- Caption -->
				<div class="caption lfl stl rev-text rev-left" data-x="left" data-y="210" data-speed="800" data-start="1100" data-easing="easeOutExpo">
					<p class="hidden-xs">Individuals, Businesses, Restaurants,...<br>Make your first step online to sell your products and services.
					<br/>Jönkötrade helps you building your online shop to reach the locals. </p>
				</div>
					
				<!-- Caption -->
				<div class="caption sfb stb rev-left" data-x="left" data-y="430" data-speed="1100" data-start="1500" data-easing="easeOutExpo">
					<a href="#" class="btn btn-outline btn-mobile2 marg-right5">Log in or Register Now</a>
					<a href="#" class="btn btn-outline btn-mobile2">Learn more</a>                     
				</div>
			</li>
			
			<!-- Slide 3 -->
				<li data-transition="slideleft" >
				<img src="img/slider/slider3.jpg" alt="" />
				
				<!-- Caption -->	
				<div class="tp-caption lfl" data-x="right" data-y="40" data-speed="1000" data-start="800" data-easing="easeOutExpo">
					<img src="img/slider/mouse.png" alt="" />
				</div>
				
				<!-- Caption -->
				<div class="caption lfl stl bold bg rev-left" data-x="left" data-y="80" data-speed="800" data-start="1500" data-easing="easeOutExpo">
					<h3 class="rev-title bold">Make some shopping.<br/><br/> Right from home.</h3>
				</div>

				<!-- Caption -->
				<div class="caption lfl stl rev-text rev-left" data-x="left" data-y="200" data-speed="800" data-start="1700" data-easing="easeOutExpo">
					<p class="white hidden-xs">Jönkötrade prevents you from moving around the whole city to find what you want.<br/> Looking for something ? 
					Just search for it here.<br/> Purchase it and get it right where it is in your surroundings!</p>
				</div>
				
				<!-- Caption -->	
				<div class="caption sfb rev-left" data-x="left" data-y="370" data-speed="800" data-start="1900" data-easing="easeOutExpo">
				<a href="#" class="btn btn-outline btn-mobile2 marg-right5">Browse products</a>
					<a href="#" class="btn btn-outline btn-mobile2">Browse the stores</a>       
				</div>	
			</li>
			
			
			</ul>
			<div class="tp-bannertimer tp-bottom"></div>
            </div>
        </div>
        <!-- // END REVOLUTION SLIDER -->

	<div id="banner">
	<div class="container intro_wrapper">
	<div class="inner_content">
	
	<!--welcome-->
		<div class="welcome_index">
		
			Trading in Jönköping has never been so <span class="hue">safe, fast and easy</span>. Just <a href="#"><span class="hue">browse the products</span></a> and services and buy whatever you need for the cheapest prices. Or <span class="hue">sell</span> whatever you want to the local citizens. 
		</div>
	<!--//welcome-->
		</div>
			</div>
				</div>
				<!--//banner-->
			
	<div class="container wrapper">
	<div class="inner_content">
	
	<!--info boxes-->
	<div class="row pad45">
			<div class="col-sm-6 col-md-3">
				<div class="tile">
					<div class="intro-icon-disc cont-large"><i class="fa fa-clock-o intro-icon-large"></i></div>
					<h6>
						<span>SAVE<br><a href="#">Your time</a></span>
					</h6>
					<p>
						Don't waste your time around town trying to find the product you wanted. Browse all the stores right from your place, purchase online and get your favorite items from the local stores. 
					</p>
					</div> 
				<div class="pad25"></div>
			</div> 
				
			<div class="col-sm-6 col-md-3">
				<div class="tile">
					<div class="intro-icon-disc cont-large"><i class="fa fa-slideshare intro-icon-large"></i></div>
						<h6>
							<span>HUMAN CONTACT<br><a href="#">It's online, but it's local. </a></span>
						</h6>
						<p>
							In this digital world where everything is anonymous and just shipped to you, we want to keep it old school. Buyers and customers still have to meet together and create social links in town. 
						</p>
						</div> 
				<div class="pad25"></div>
			</div> 
					
			<div class="col-sm-6 col-md-3">
				<div class="tile">
					<div class="intro-icon-disc cont-large"><i class="fa fa-cc-paypal intro-icon-large"></i></div>
						<h6><span>SAFE FOR BUYERS<br><a href="#">scam-free system</a></span></h6>
						<p>
							Jönkötrading is safe. As a buyer, you can pay online via Paypal. You won't be charged immediately. Jönkötrade gives you a passcode you will give to the seller once you meet him and get the product. 
						</p>	
						</div> 
				<div class="pad25"></div>
			</div> 
				
			<div class="col-sm-6 col-md-3">
				<div class="tile">
					<div class="intro-icon-disc cont-large"><i class="fa fa-check-square-o  intro-icon-large"></i></div>
						<h6>
							<span>SAFE FOR SELLERS<br><a href="#">Secure transaction</a></span></h6>
						<p>
							As a seller, all you have to do is to type the passcode the buyer gives you during the meeting on your personnal pannel. The customer will be charged, and the money wired to your paypal account. 
						</p>
						</div>
					<div class="pad25"></div>	
			</div> 
				</div> 
				
			<!--//info boxes-->
			
			<div class="pad25 hidden-xs hidden-sm"></div> 
		</div>
		
		<!--//page-->
	</div>
	<div class="strip2">
				<h1>Recent products</h1>
					<h3 class="center about_strip">
						Here is a few selection of products recently put on sale by the community
						</br><span class="hue">Take a look!</span>
					</h3>
			
			<div class="container wrapper">
			<div class="inner_content col_full">
			
			<div style="display: block; text-align: center; float: none; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; margin: 0px; overflow: hidden; position: relative; cursor: move; width: 1170px; height: 207px;" class="caroufredsel_wrapper"><div style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 4914px; height: 207px;" id="slider_related">
			<?php
			
				displayLatestProducts($db);
				
			?>
			</div></div>
				<div style="display: block;" id="sl-prev" class="widget-scroll-prev2"><i class="fa fa-chevron-left white"></i></div>
				<div style="display: block;" id="sl-next" class="widget-scroll-next2"><i class="fa fa-chevron-right white but_marg"></i></div>
				</div>
			<!--//projects-->
				</div>
			</div>
	<?php include_once('inc/footer.php'); ?>